import {
  View,
  Text,
  StyleSheet,
  Button,
  ScrollView,
  Dimensions,
} from 'react-native';
import React, {useState} from 'react';
import {useNavigation} from '@react-navigation/native';
// import {WebView} from 'react-native-webview';
import {Picker} from '@react-native-picker/picker';
import Swiper from 'react-native-swiper';
import {setStorage, getStorage} from './utils/storage';

export default function Home() {
  const navigation = useNavigation();
  const [selectedLanguage, setSelectedLanguage] = useState();

  const handlePress = () => {
    navigation.navigate('Detail', {name: '张三'});
  };

  const handleSet = () => {
    setStorage('name', '张三').then(() => {
      console.log('sdada');
    });
  };

  const handleGet = () => {
    getStorage('name').then(res => {
      console.log('res', res);
    });
  };
  return (
    <View style={styles.container}>
      <Text>home</Text>
      <ScrollView>
        <Swiper style={styles.swiper} showsButtons={true} autoplay>
          <View style={styles.slide1}>
            <Text style={styles.text}>Hello Swiper</Text>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>Beautiful</Text>
          </View>
          <View style={styles.slide3}>
            <Text style={styles.text}>And simple</Text>
          </View>
        </Swiper>
        <Button onPress={handleSet} title="设置缓存" />
        <Button onPress={handleGet} title="获取缓存" />

        <View style={styles.box}>
          <Picker
            style={styles.picker}
            prompt="请选择"
            selectedValue={selectedLanguage}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedLanguage(itemValue)
            }>
            <Picker.Item label="重庆" value="java" />
            <Picker.Item label="成都" value="js" />
          </Picker>
        </View>

        <Button onPress={handlePress} title="跳转" />
      </ScrollView>
      {/* <View style={{flex: 1}}>
        <WebView source={{html: '<h1>Hello world</h1>'}} />
      </View> */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  swiper: {
    height: 300,
  },
  slide1: {
    width: Dimensions.get('window').width,
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    width: Dimensions.get('window').width,
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
  box: {
    width: '100%',
    height: 50,
    borderWidth: 1,
    borderColor: 'green',
  },
  pickerBox: {},
  picker: {
    width: '100%',
    height: 50,
  },
});
